<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="20"
      :columns="columns"
      :pagination="false"
      :data="tableData"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="add">新增菜单</el-button>
      </template>
      <template #type="scope">
        <el-tag v-if="scope.row.type == 0" effect="dark" type="danger">目录</el-tag>
        <el-tag v-if="scope.row.type == 1" effect="dark" type="success">菜单</el-tag>
        <el-tag v-if="scope.row.type == 2" effect="dark" type="warning">按钮</el-tag>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon v-if="scope.row.icon" :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <template v-for="item in templateKeys" :key="item" #[item]="{ row }">
        <el-tag
          v-if="row.type != 2"
          effect="dark"
          :type="row[item] == 0 ? 'warning' : 'success'"
        >
          {{ row[item] == 0 ? '否' : '是' }}
        </el-tag>
      </template>
      <!-- 菜单操作 -->
      <template #operation="{ row }">
        <el-button size="small" type="warning" :icon="EditPen" @click="edit(row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" :icon="Delete" @click="remove(row)">
          删除
        </el-button>
      </template>
    </ProTable>

    <MenuDialog
      ref="menuDialogRef"
      v-model="menuDialog.show"
      :type="menuDialog.type"
      :title="menuDialog.title"
      :treeParent="treeParent"
      :editRow="editRow"
      @update="handleUpdate"
      @reset="handleReset"
    />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { markRaw, onMounted, reactive, ref } from 'vue'
import { ColumnProps } from '@/components/ProTable/interface'
import { Delete, EditPen, CirclePlus, Plus } from '@element-plus/icons-vue'
import authMenuList from '@/assets/json/authMenuList.json'
import ProTable from '@/components/ProTable/index.vue'
import MenuDialog from '@/views/system/menuMange/components/menuDialog.vue'
import { OperationType } from '@/enums'
import { deleteMenuApi, getMenuTreeApi, getMenuTreeParentApi } from '@/api/modules/menu'
import { MenuApi } from '@/api/interface/menu'
import { ElMessage, ElMessageBox } from 'element-plus'

const proTable = ref()
const menuDialogRef = ref()
// const menuData = ref(authMenuList.data)
const tableData = ref<MenuApi.Menu[]>([])
const showDialog = ref(false)
const menuDialog = ref({
  show: false,
  type: '',
  title: ''
})
// 表格配置项
const columns: ColumnProps[] = [
  { prop: 'title', label: '菜单名称', width: 200 },
  { prop: 'type', label: '菜单类型', width: 90 },
  { prop: 'icon', label: '菜单图标', width: 90 },
  { prop: 'name', label: '路由名称' },
  { prop: 'path', label: '访问路径' },
  { prop: 'component', label: '组件路径' },
  { prop: 'permissionCode', label: '权限字段' },
  { prop: 'redirect', label: '重定向' },
  { prop: 'is_link', label: '外链地址' },
  { prop: 'is_hide', label: '是否隐藏', width: 90 },
  { prop: 'is_full', label: '是否全屏', width: 90 },
  { prop: 'is_affix', label: '是否固定', width: 90 },
  { prop: 'is_keep_alive', label: '是否缓存', width: 90 },
  { prop: 'operation', label: '操作', width: 170, fixed: 'right' }
]
const templateKeys = markRaw(['is_hide', 'is_full', 'is_affix', 'is_keep_alive'])
const editRow = ref({})
const treeParent = ref<MenuApi.Menu[]>([])

const add = () => {
  editRow.value = {}
  menuDialog.value = {
    show: true,
    type: OperationType.ADD,
    title: '添加菜单'
  }
}
const edit = (row: MenuApi.Menu) => {
  console.log('🚀 - row:', row)
  editRow.value = row
  menuDialog.value = {
    show: true,
    type: OperationType.EDIT,
    title: '编辑菜单'
  }
}
const remove = (row: MenuApi.Menu) => {
  ElMessageBox.confirm(`确认删除菜单【${row.title}】?`, '操作提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let res = await deleteMenuApi({ params: row })
      if (res.errCode === 0) {
        getTableData()
        getMenuTreeParent()
        menuDialogRef.value?.getMenuTreeParentApi()
        ElMessage.success("删除成功")
      }
    })
    .catch(() => {})
}

const getTableData = async () => {
  let res = await getMenuTreeApi()
  if (res.errCode === 0) {
    tableData.value = res.data[0]?.children as MenuApi.Menu[]
  }
}

const getMenuTreeParent = async () => {
  let res = await getMenuTreeParentApi()
  if (res.errCode === 0) {
    treeParent.value = res.data
  }
}

const handleReset = () => {
  menuDialog.value = {
    show: false,
    type: '',
    title: ''
  }
}
const handleUpdate = () => {
  // proTable.value.getTableList()
  getTableData()
  getMenuTreeParent()
}

onMounted(() => {
  getTableData()
  getMenuTreeParent()
})
</script>
